<template>
    <van-dialog :show="store.state.user.isShowLoginDialog" title="登录" show-cancel-button @confirm="invokeLogin"
                @cancel="hiddenLoginDialog"
                width="500">
        <div class="login-box">
            <div>
                <van-form>
                    <van-field
                        v-model="phone"
                        name="手机号"
                        label="手机号"
                        placeholder="手机号"
                        :rules="[{ required: true, message: '请填写手机号' }]"
                    />
                    <van-field
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                </van-form>
            </div>
        </div>
        <div v-show="isLoading" class="flex items-center justify-center">
            <van-loading size="24px">加载中...</van-loading>
        </div>
    </van-dialog>
</template>

<script>
import {reactive, ref, toRefs} from "vue";
import { login} from "@/network/user";
import {useNotification} from "naive-ui";
import {useStore} from "vuex";

export default {
    name: "Login",
    setup() {
        const TAG = "Login.vue";
        const store = useStore();
        const notification = useNotification();
        let user = reactive({
            phone: '',
            password: ''
        })
        // 是否处于加载状态
        let isLoading = ref(false);
        // 真正的登录函数
        const invokeLogin = () => {
            isLoading.value = true;
            login(user).then(res => {
                // 连接成功
                if (res.status == 200) {
                    // 登录成功
                    if (res.data.code == 200) {
                        store.commit('setLoginStatus', true);
                        store.commit('setAvatarUrl', res.data.profile.avatarUrl);
                        store.commit('setNickName', res.data.profile.nickname);
                        store.commit('setUid', res.data.profile.userId);
                        store.commit('setLoginDialog', false);
                        notification['success']({
                            content: '登录成功',
                            meta: '听点音乐?'
                        })
                    } else {
                        notification['error']({
                            content: '用户信息错误',
                            meta: '要不再试一次?'
                        })
                    }
                } else {
                    notification['error']({
                        content: '连接服务器失败',
                        meta: '要不再试一次?'
                    })
                }
            })
            isLoading.value = false;
        }
        const hiddenLoginDialog = () => {
            store.commit('setLoginDialog', false);
        }
        return {
            store,
            ...toRefs(user),
            invokeLogin,
            isLoading,
            hiddenLoginDialog
        }
    },
    components: {
    }
}
</script>

<style scoped>

</style>